import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Platform,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Image,
    Linking,
    TextInput
} from 'react-native';

import { ToastToUser } from '../../utils/CustomToast';

const screenW = Dimensions.get('window').width;
const isIos = Platform.OS == 'ios';

export default class CodeVerifyView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            code: '',
        }
    }

    render() {
        return(
            <View style={styles.container}>
                <View style={styles.veifyCodeBox}>
                    <TouchableOpacity
                        style={styles.closeBox}
                        activeOpacity={0.8}
                        onPress={()=>{
                            this.closeHandler()
                        }}
                    >
                        <Image style={styles.closeImg} source={{uri: 'code_close.png'}}/>
                    </TouchableOpacity>
                    <View style={styles.codeBox}>
                        <TextInput
                            style={styles.textInput}
                            placeholder='请输入图片验证码'
                            placeholderTextColor="#999999"
                            value={this.state.code}
                            onChangeText={this.onCodeChangeText}
                        />
                        <TouchableOpacity
                            activeOpacity={0.8}
                            onPress={()=>{
                                this.refreshCode()
                            }}
                        >
                            <Image style={styles.codeImage} source={{uri: this.props.imageData}}/>
                        </TouchableOpacity>
                    </View>
                    <TouchableOpacity
                        style={styles.sureBox}
                        activeOpacity={0.8}
                        onPress={()=>{
                            this.submitCode()
                        }}
                    >
                        <Text style={styles.sureText}>确认</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }

    onCodeChangeText = (value) => {
        this.setState({
            code: value
        })
    }

    closeHandler() {
        if (this.props.closeHandler) {
            this.props.closeHandler()
        }
    }

    refreshCode() {
        if (this.props.refreshCodeHandler) {
            this.props.refreshCodeHandler()
        }
    }

    submitCode() {
        if (!this.state.code) {
            ToastToUser('请输入验证码!')
            return;
        }
        if (this.props.submitCodeHandler) {
            this.props.submitCodeHandler(this.state.code)
        }
    }

}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0,0,0,0.7)',
        justifyContent: 'center',
        alignItems: 'center'
    },
    veifyCodeBox: {
        backgroundColor: '#FFFFFF',
        width: 275,
        height: 180,
        marginBottom: 100,
        borderRadius: 4,
        flexDirection: 'column',
        paddingHorizontal: 18,
        paddingTop:41,
    },
    closeBox: {
        position: 'absolute',
        width: 30,
        height: 30,
        right:0,
        top: 0,
        justifyContent: 'center',
        alignItems: 'center'
    },
    closeImg: {
        width: 10,
        height: 10,
    },
    codeBox:{
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    textInput: {
        paddingLeft:10,
        color: '#333333',
        fontSize: 14,
        width: 167,
        height: 41,
        borderColor: '#EAEAEA',
        borderWidth: 1,
        borderRadius: 4,
    },
    codeImage:{
        width: 63,
        height: 41,
        marginLeft: 8,
    },
    sureBox:{
        width: 238,
        height: 42,
        marginTop: 35,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FADF4B',
        borderRadius: 4,
    },
    sureText:{
        color: '#333333',
        fontSize: 16
    },
})